# Учебный проект: Модальное окно

"Модальное окно" - компонент, который открывается поверх основного интерфейса и блокирует работу с ним, пока пользователь его не закроет. Вы уже сталкивались с функциями, открывающими стандартные браузерные модальные окна - это функции `alert`, `prompt`, `confirm`. Но они нам не всегда подходят, ведь мы не можем управлять их внешним видом, а также влиять на их содержимое. Поэтому для нужд проекта мы создадим свой компонент, лишённый этих недостатков.

Создайте класс `Modal`, описывающий компонет "Модальное окно". Это будет универсальное модальное окно, позволяющее открывать себя из внешнего кода, задавать заголовок, содержимое и др.

На вёрстку можно посмотреть в файле `static.html`, а пример использования - в файле `index.html`.

##  Основные методы для работы с модальным окном

Для того, чтобы было удобно использовать наше модальное окно, нужно реализовать следующие методы:

### Метод open()

"Открывает" модальное окно, т.е. добавляет всю его вёрстку в `body` документа. Помимо этого, необходимо добавлять класс `is-modal-open` элементу `body`.

```js
let modal = new Modal();

modal.open();
```

### Метод setTitle('modal title')

Принимает в качестве аргумента переменную с заголовком модального окна и записывает её значение внутрь элемента с классом `modal__title`.

```js
modal.setTitle('Заголовок модального окна');
```

### Метод setBody(node)

Принимает в качестве аргумента корневой HTML того, что мы хотим показать в модальном окне, и вставляет его в элемент с классом `modal__body`. Обращаем ваше внимание, всё, что было до этого внутри элемента с классом `modal__body`, должно быть стёрто.

```js
let modalBody = document.createElement('div');
modalBody.innerHTML = `<b>тут содержится тело модального окна<b/>`

modal.setBody(modalBody);
```

## Закрытие модального окна

При закрытии модального окна нужно полностью удалить его вертску со страницы и убрать класс `is-modal-open` с элемента `body`. Всего нужно реализовать три способа закрытия:

### Закрытие при вызове метода close()

Это необходимо, чтобы код, который будет использовать компонент модального окна, имел возможность его закрыть. 

```js
modal.close();
```

### Закрытие по клику по кнопке [X]

Эта кнопка находится в вёрстке модального окна и содержит класс `modal__close`. 

### Закрытие по нажатию на клавишу ESC

Чтобы это сделать, нужно "слушать" событие `keydown` на всём документе и закрывать модальное окно, если пользователь нажал именно `ESC`. В определении, какая именно клавиша была нажата, вам поможет свойство `code` объекта события. Для клавиши `ESC` в нём будет строка `Escape`. 

```js
event.code === 'Escape'; // true, если была нажата клавиша 'ESC'
```

Подробнее про событие `keydown`, можно прочитать в статье - [Клавиатура: keydown и keyup](https://learn.javascript.ru/keyboard-events)

**(!!!)** Обращаем ваше внимание, что при закрытии модального окна **ЛЮБЫМ СПОСОБОМ** нужно **ОБЯЗАТЕЛЬНО** удалить обработчик события `keydown`. Это необходимо, чтобы этот обработчик не вызывался после закрытия окна при нажатии кнопок на клавиатуре.